<template>
    <div class="account">
        <van-nav-bar :title="title" :left-arrow="leftArrow" @click-left="onClickLeft" />
        <div style="padding:16px; background-color:#fff; height: 100%">
            <van-form @submit="rechargeSubmit" style="background-color: #fff">
                <van-button native-type="button" style="margin-right: 10px; margin-bottom:10px" @click="par50Click"
                    :type="par50">50</van-button>
                <van-button native-type="button" style="margin-right: 10px; margin-bottom:10px" @click="par100Click"
                    :type="par100">100</van-button>
                <van-button native-type="button" style="margin-right: 10px; margin-bottom:10px" @click="par300Click"
                    :type="par300">300</van-button>
                <van-button native-type="button" style="margin-right: 10px; margin-bottom:10px" @click="par500Click"
                    :type="par500">500</van-button>
                <van-button native-type="button" style="margin-right: 10px; margin-bottom:10px" @click="otherClick"
                    :type="other">其他金额</van-button>
                <van-field v-if="other === 'primary'" label="输入金额" readonly clickable :value="rechargeAmount"
                    @touchstart.native.stop="show = true" />
                <div style="margin: 16px 0">
                    <van-button block type="info" v-if="isWechatOfficialAccount()" :disabled="isDisabled" native-type="submit">充值</van-button>
                </div>
            </van-form>
            <van-number-keyboard :extra-key="extraKey" v-model="rechargeAmount" :show="show" @blur="show = false" />
        </div>
    </div>
</template>

<script>
import { isWechatOfficialAccount } from '@/utils/func.js'
const reg5 = /^\d*\.?\d+$/;
export default {
    name: 'home',
    props: {
        title: {
            type: String,
            default: '充值'
        }
    },
    computed: {
        isDisabled() {
            if (this.par50 === 'primary' || this.par100 === 'primary' || this.par300 === 'primary' || this.par500 === 'primary') {
                return false
            } else {
                if (this.rechargeAmount) {
                    return false
                } else {
                    return true
                }
            }
        }
    },
    data() {
        return {
            leftArrow: true,
            isWechatOfficialAccount,
            show: false,
            index: 0,
            images: ['https://img.yzcdn.cn/vant/cat.jpeg'],
            rechargeAmount: '',
            extraKey: '.',
            par50: 'default',
            par100: 'default',
            par300: 'default',
            par500: 'default',
            other: 'default'
        };
    },
    methods: {
        initAmount() {
            this.rechargeAmount = ''
            this.par50 = 'default'
            this.par100 = 'default'
            this.par300 = 'default'
            this.par500 = 'default'
            this.other = 'default'
        },
        par50Click() {
            this.par50 = 'primary'
            this.par100 = 'default'
            this.par300 = 'default'
            this.par500 = 'default'
            this.other = 'default'
        },
        par100Click() {
            this.par50 = 'default'
            this.par100 = 'primary'
            this.par300 = 'default'
            this.par500 = 'default'
            this.other = 'default'
        },
        par300Click() {
            this.par50 = 'default'
            this.par100 = 'default'
            this.par300 = 'primary'
            this.par500 = 'default'
            this.other = 'default'
        },
        par500Click() {
            this.par50 = 'default'
            this.par100 = 'default'
            this.par300 = 'default'
            this.par500 = 'primary'
            this.other = 'default'
        },
        otherClick() {
            this.par50 = 'default'
            this.par100 = 'default'
            this.par300 = 'default'
            this.par500 = 'default'
            this.other = 'primary'
        },
        //微信支付
        async rechargeSubmit() {
            try {
                let money = ''
                if (this.par50 === 'primary') {
                    money = 50
                } else if (this.par100 === 'primary') {
                    money = 100
                } else if (this.par300 === 'primary') {
                    money = 300
                } else if (this.par500 === 'primary') {
                    money = 500
                } else if (this.other === 'primary') {
                    money = this.rechargeAmount
                }
                if (!reg5.test(money)) {
                    this.$toast('请输入自定义金额，且必须输入数字')
                    return
                }
                const params = {
                    money,
                    openId: localStorage.getItem("openId")
                }
                // 异步获取支付参数，假设通过接口请求获取
                const payParams = await this.$post('/wxpay/jsapiPay', params);

                // 调用微信支付
                this.callWeixinPay(payParams);
            } catch (error) {
                console.error('Failed to get payment parameters', error);
            }
        },
        callWeixinPay(payParams) {
            if (typeof WeixinJSBridge === "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', () => this.onBridgeReady(payParams), false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', () => this.onBridgeReady(payParams));
                    document.attachEvent('onWeixinJSBridgeReady', () => this.onBridgeReady(payParams));
                }
            } else {
                this.onBridgeReady(payParams);
            }
        },
        onBridgeReady(payParams) {
            /* eslint-disable */
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                appId: payParams.data.appId,     //公众号ID，由商户传入     
                timeStamp: payParams.data.timeStamp,         //时间戳，自1970年以来的秒数     
                nonceStr: payParams.data.nonceStr, //随机串     
                package: payParams.data.package,
                signType: payParams.data.signType,         //微信签名方式：     
                paySign: payParams.data.paySign
            }, (res) => {
                if (res.err_msg === "get_brand_wcpay_request:ok") {
                    // 支付成功后的处理逻辑
                    if (this.title === '余额不足请充值') {
                        this.$emit('resubmit')
                    } else {
                        this.$router.push('/revAndExp')
                    }

                } else {
                    this.$toast('支付失败')
                }
            });
        },
        onClickLeft() {
            this.$router.push('/wallet')
        },
        onChange(index) {
            this.index = index;
        },
        toEditAccount() {
            this.$router.push('/editAccount')
        }
    },
    mounted() {
        const url = window.location.url
        this.leftArrow = url.includes('recharge')
    }
}
</script>

<style scoped>
.account {
    background-color: #f5f5f5;
    height: 100%;
    width: 100%;
    font-size: 1rem;
}

.tel {
    line-height: 100%;
    text-align: center;
    margin-top: 50%;
}

.account-label {
    float: left;
}

.account-value {
    float: right;
}

.account-title {
    background-color: #fff;
    padding: 0.5rem 0.45rem;
    border-bottom: 1px #dddddd solid;
}

.account-title-icon {
    margin-right: 0.2rem;
}

.account-info {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
</style>

<style>
.van-key__wrapper{
  text-align: center !important;
}
.van-password-input__item i {
  margin-top: 0
}
</style>
